import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { openSongPage, getMusicUrlAsync, loadSongAsync } from '../../../store/actions/music.action';
import { generateArtists } from '../../../utils/common';
import './index.css';

const mapStateToProps = state => {
    return {
        music: state.music
    }
}
const mapDispatchToProps = dispatch => {
    return {
        loadSongAsync: (...args) => dispatch(loadSongAsync(...args)),
        openSongPage: (...args) => dispatch(openSongPage(...args)),
        getMusicUrlAsync: (...args) => dispatch(getMusicUrlAsync(...args)),
    }
}
// Type 1: Song
// Type 2: Album
// Type 3: Digital Album
const MediaItem = ({ item, type, loadSongAsync, openSongPage, music }) => {
    const clickHandler = (item, type) => {
        console.log("click", item, type);
        switch (type) {
            case 1:
                if (!music.curSong.id || (music.curSong.id !== item.id)) {
                    loadSongAsync(item);
                } else {
                    openSongPage();
                }
                return;
            default:
                break;
        }
    }
    return (
        <div className="media-item-container" onClick={() => clickHandler(item, type)}>
            <img src={item.picUrl ? item.picUrl : item.album.picUrl} />
            <div className="media-item-detail">
                <div>
                    <span>{item.name}</span>
                    <span>
                        {` - ${generateArtists(item.song ? item.song.artists : item.artists)}`}
                    </span>
                </div>
                <div>{item.song ? item.song.album.name : item.album.name}</div>
                <span className="iconfont video-icon icon-shipin"></span>
            </div>
        </div>
    );
}

export default connect(mapStateToProps, mapDispatchToProps)(MediaItem);